<template>
  <div class="app-main-container">
    <!-- <div class="app-main-title">产品销售明细</div> -->
    <QueryForm
      v-model="form"
      :query-form-config="queryFormConfig"
      @handleQuery="handlePageChange(1)"
      @clear="clear"
    >
      <template #btns>
        <el-button
          :loading="exportLoading"
          type="primary"
          @click="exportExcl"
        >{{ translate('batchExport') }}</el-button>
      </template>
    </QueryForm>
    <el-table
      :data="list"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column
        prop="orderId"
        align="center"
        :label="translate('orderNum')"
        min-width="200"
        fixed="left"
      />
      <el-table-column
        prop="day"
        align="center"
        :label="translate('date')"
        min-width="100"
      />
      <el-table-column
        prop="city"
        align="center"
        :label="translate('city')"
        min-width="140"
        show-overflow-tooltip
      >
        <template slot-scope="{ row }">
          <span class="han1">{{ row.city }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="venue"
        align="center"
        :label="translate('venue')"
        min-width="200"
      />
      <el-table-column
        prop="orderType"
        align="center"
        :label="translate('gmxs')"
        min-width="140"
      />
      <el-table-column
        prop="item"
        align="center"
        :label="translate('prductCate')"
        min-width="200"
      />
      <el-table-column
        prop="name"
        align="center"
        :label="translate('productName')"
        min-width="200"
      />
      <el-table-column
        prop="payType"
        align="center"
        :label="translate('cifs')"
        min-width="120"
      />
      <el-table-column
        prop="memberName"
        align="center"
        :label="translate('hyxm')"
        min-width="120"
      />
      <el-table-column
        prop="memberPhone"
        align="center"
        :label="translate('lxfs')"
        min-width="120"
      />
      <el-table-column
        prop="courseNum"
        align="center"
        :label="translate('gmkes')"
        min-width="100"
      />
      <el-table-column
        prop="realPrice"
        align="center"
        :label="translate('ssje')"
        min-width="100"
      />
      <el-table-column
        prop="unitPrice"
        align="center"
        :label="translate('ksdj')"
        min-width="100"
      />
      <el-table-column
        prop="startDay"
        align="center"
        :label="translate('yxqqs')"
        min-width="140"
      />
      <el-table-column
        prop="endDay"
        align="center"
        :label="translate('yxqjs')"
        min-width="140"
      />
      <el-table-column
        prop="source"
        align="center"
        :label="translate('keyuan')"
        min-width="100"
      />
      <el-table-column
        prop="teacherName"
        align="center"
        :label="translate('fwjlry')"
        min-width="100"
      />
      <el-table-column
        prop="creatorName"
        align="center"
        :label="translate('czuxm')"
        min-width="100"
      />
      <el-table-column
        align="center"
        :label="translate('bz')"
        min-width="240"
        show-overflow-tooltip
      >
        <template slot-scope="{ row }">
          <span class="han1">{{ row.remarks }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- <div class="flex-cc doumee-pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="totalCount"
        :current-page.sync="pagination.page"
        hide-on-single-page
        @current-change="handlePageChange"
      />
    </div> -->
    <Pagination
      :total="totalCount"
      :page="pagination.page"
      @current-change="handlePageChange"
      @SizeChange="handleSizeChange"
    />
  </div>
</template>
<script>
import { courseAndSite, venueList, courseAndSiteExport } from '@/api'
import Pagination from '@/components/paginations'
import { queryFormConfig } from './config'
export default {
  name: 'ProductDistribution',
  components: {
    Pagination
  },
  data() {
    return {
      form: {},
      exportLoading: false,
      queryFormConfig,
      pagination: {
        page: 1,
        rows: 10
      },
      totalCount: 0,
      list: [],
      venue: [],
      date: [],
      dateIndex: 1
    }
  },
  created() {
    this.handlePageChange(1)
    venueList({ param: { flag: '0' }})
      .then(res => {
        this.venue = res.recordList
        const arr = res.recordList
        this.queryFormConfig.formItems[0].options = arr
        this.$set(this.form, 'venueId', res.recordList[0].id)
        // this.handlePageChange(1)
      })
  },
  methods: {
    clear() {
      this.form = {}
      this.handlePageChange(1)
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.handlePageChange(1)
    },
    handlePageChange(page) {
      sessionStorage.setItem('venueId', this.form.venueId)
      if (page) {
        this.pagination.page = page
      }
      const param = this.form
      if (param.time && param.time.length > 0) {
        param.startDate = param.time[0]
        param.endDate = param.time[1]
      } else {
        param.startDate = ''
        param.endDate = ''
      }
      courseAndSite({
        pagination: { ...this.pagination },
        param
      })
        .then(res => {
          this.list = res.recordList
          this.total = res.total
        })
    },
    exportExcl() {
      sessionStorage.setItem('venueId', this.form.venueId)
      const param = this.form
      if (param.time && param.time.length > 0) {
        param.startDate = param.time[0]
        param.endDate = param.time[1]
      } else {
        param.startDate = ''
        param.endDate = ''
      }
      this.exportLoading = true
      courseAndSiteExport({
        param
      })
        .then(res => {
          this.exportLoading = false
          if (res.errorCode === '000000') {
            window.open(res.record.showUrl, '_blank')
          }
        }).catch(() => {
          this.exportLoading = false
        })
    }
  }
}
</script>
